{% extends "base.html" %}
{% block content %}
    <style>
        #preview {
            height:500px;
            width:50%;
            margin-left:10px;
            overflow-y: scroll;
            border-radius: 8px;
            border: 2px solid grey;
            padding: 5px;
        }
    </style><h1>New Post</h1>
    <form method="POST" name="form1">
        <label>Title</label>
        <input class="title_input" type="text" name="title" required>
        <div style="display: flex"><label style="width: 50%">Content</label><label style="width: 50%">Preview</label></div>
        <div style="display: flex;">
            <textarea id="content" name="content" style="height: 500px; width: 50%; overflow-y: scroll"></textarea>
            <div id="preview"></div>
        </div>
        <label for="topic">Topic</label>
        <input type="text" name="topic" id="topic" required>
        <small>Split different tags with ';'</small>
        <button type="submit" class="button">Submit</button>
    </form>
{% endblock %}
{% block add %}
    <link rel="stylesheet" href="/static/dark.css">
    <link rel="stylesheet" href="/static/github-markdown-dark.css">
    <script src="/static/js/highlight.js"></script>
    <script src="/static/js/javascript.js"></script>
    <script src="/static/js/marked.js"></script>
    <script>
        function view(){
            var content = document.getElementById("content").value;
            document.getElementById("preview").innerHTML = marked.parse(content);
            hljs.highlightAll();
            MathJax.typeset();
        }
        setInterval(view, 200);
        window.onload = function() {
            document.getElementById("new_post").className="active";
        }
    </script>
{% endblock %}